<template>
    <div class="page-look">
        <div class="look">
            <div class="container">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" placeholder="搜索用户" ref="search" placeholder-style="color:#b0b3bf;" v-model="value" @input.prevent="search()">
                <span class="back" @click="onBack">取消</span>
            </div>
        </div>
        <div class="user-container">
            <h3 class="title" v-if="lookList.length">用户</h3>
            <ul class="user-list">
                <li class="user-item" v-for="(item,index) in lookList" :key="index">
                    <div class="left">
                        <img :src="item.avatar">
                    </div>
                    <div class="mid">
                        <p class="nickname" v-html="item.nickname"></p>
                        <p class="username" v-html="item.username"></p>
                    </div>
                    <div class="right">
                        <span class="send" v-if="item.tip==1" @click="onChat(item.id)">发消息</span>
                        <span class="add" v-if="item.tip==0" @click="onAdd(item.id)">加好友</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PageLook',
    data() {
        return {
            value: ''
        }
    },
    methods: {
        search() {
            if(this.value.length) {
                var obj = {
                    type: 'search',
                    fromId: this.$store.state.userInfo.id,
                    token: this.$store.state.userInfo.token,
                    value: this.value
                }
                var data = JSON.stringify(obj);
                this.ws.send(data);
            }else{
                this.$store.commit('setLookList',[])
            }
        },
        onBack() {
            this.$store.commit('setLookList',[])
            this.$router.back(-1);
        },
        onChat(e) {
            this.$router.push(`/chat/${e}`)
        },
        onAdd(e) {
            this.$router.push(`/friend/${e}`)
        }
    },
    computed: {
        lookList() {
            return this.$store.state.lookList
        }
    },
    created() {
        this.$nextTick(() => {
            this.$refs.search.focus();
        })
    }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/theme.scss';
.page-look{
    width:100vw;
    height:100vh;
    overflow: auto;
    padding-top:47px;
    @include background_color('background_color3');
    .look{
        position: fixed;
        top:0;
        left:0;
        width:100%;
        @include background_color('background_color5');
        padding:8px 10px;
        .container{
            position: relative;
            display: flex;
            align-items: center;
            .iconfont{
                position: absolute;
                left:8px;
                top:7px;
                @include font_color('font_color11');
            }
            input{
                flex:1;
                margin-right:5px;
                outline: none;
                border:0;
                padding:8px 10px 8px 30px;
                border-radius:20px;
                @include font_color('font_color1');
                @include background_color('background_color8');
            }
            .back{
                font-size:14px;
                @include font_color('font_color11');
            }
        }
    }
    .user-container{
        @include background_color('background_color5');
        .title{
            padding:5px 10px;
            @include font_color('font_color11');
        }
        .user-list{
            padding:0 10px;
            .user-item{
                display: flex;
                align-items: center;
                padding:6px 0;
                .left{
                    img{
                        width:48px;
                        height:48px;
                        border-radius:10px;
                    }
                }
                .mid{
                    flex:1;
                    margin-left:10px;
                    @include font_color('font_color1');
                    .nickname{
                        font-size:16px;
                        margin-bottom:5px;
                    }
                    .username{
                        font-size:14px;
                    }
                }
                .right{
                    span{
                        font-size:0.875rem;
                        padding:3px 8px;
                        border-radius:50px;
                        @include font_color('font_color3');
                        @include background_color('background_color6');
                    }
                }
            }
        }
    }
}
</style>